<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>修改赛事</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/base.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/area.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .rotate {

            transform-origin: center center;

            transform: rotate(180deg);

            -webkit-transform: rotate(180deg);

            -moz-transform: rotate(180deg);

            -ms-transform: rotate(180deg);

            -o-transform: rotate(180deg);

            transition: transform 0.2s;
            -moz-transition: -moz-transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -o-transition: -o-transform 0.2s;

            -ms-transition: -ms-transform 0.2s;

        }

        .rotate1 {

            transform-origin: center center;

            transform: rotate(0deg);
            -webkit-transform: rotate(0deg);

            -moz-transform: rotate(deg);

            -ms-transform: rotate(0deg);

            -o-transform: rotate(0deg);

            transition: transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -moz-transition: -moz-transform 0.2s;

            -o-transition: -o-transform 0.2s;

            -ms-transition: -ms-transform 0.2s;

        }

        .title .pull-left {
            float: left;
            font-size: 18px;
            font-weight: 700;
            color: #b1b1b1;
            line-height: 42px;
        }

        .title .pull-left.active {
            color: #333;
            border-bottom: 1px solid #42abff;
        }

        .title .pull-left.active .num {
            font-size: 33px;
            color: #3385c6;
        }

        .title .pull-left .num {
            font-size: 33px;
        }

        .chooseType div,
        .chooseType input {
            margin-top: 0;
            margin-right: 0;
            line-height: 50px;
        }

        .nextStep {
            margin: 0 auto;
        }

        .layui-card .layui-card-body {
            font-size: 14px;
        }

        .layui-card .layui-card-body .layui-input {
            height: 35px;
            margin-bottom: 26px;
        }

        .layui-card .layui-card-body .layui-form-label {
            padding-left: 0;
            width: 115px;
        }

        .sstitle {
            border-bottom: 1px solid #333;
        }

        .ssbody {
            display: none;
            background: #efefef;
        }
    </style>
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="display: flex;justify-content: space-between;">
                    <div class="layui-card-body ">
                        <div class="title">
                            <div class="topstep1 pull-left active" style="margin-right:30px">
                                <span class="num">01</span>
                                <span>赛程安排</span>
                            </div>
                            <div class="pull-left" style="margin-right:30px">
                                <img src="../images/jiantou.jpg" alt="">
                            </div>
                            <div class="topstep2 pull-left" style="margin-right:30px">
                                <span class="num">02</span>
                                <span>裁判安排</span>
                            </div>
                            <div class="pull-left" style="margin-right:30px">
                                <img src="../images/jiantou.jpg" alt="">
                            </div>
                            <div class="topstep2 pull-left">
                                <span class="num">03</span>
                                <span>赛事数据</span>
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                </div>
                <form class="layui-form" action="">
                    <div class="midstep1">
                        <div class="layui-card" style="display: flex;justify-content: space-between;">
                            <div class="layui-card-body" style="width: 100%;">
                                <div style="background: #EFEFEF;margin-bottom: 20px;">赛程安排</div>
                                <div class="chooseType">
                                    <div class="layui-col-md12">
                                        <div class="layui-form-item layui-col-md10 layui-col-md-offset1 scapbody">
                                            <div class="layui-col-md1" style="line-height: 35px;">场次：
                                                <span class="x-red">*</span>
                                            </div>
                                            <div class="layui-col-md11">
                                                <input type="text" name="changci" id="changci" class="layui-input"
                                                    style="width: 50px;">
                                            </div>
                                            <div class="layui-col-md11 layui-col-md-offset1">
                                                <div class="sstitle">场次：1
                                                    <i style="float: right;"
                                                        class="layui-icon layui-icon-down rotate1"></i>
                                                </div>
                                                <div class="ssbody" style="padding-top: 20px;">
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">主办地：</label>
                                                        <div class="layui-input-inline" style="width: 120px;">
                                                            <select name="country" id="s_province"
                                                                lay-filter="s_province"></select>
                                                        </div>
                                                        <div class="layui-input-inline" style="width: 120px;">
                                                            <select name="city" id="s_city"
                                                                lay-filter="s_city"></select>
                                                        </div>
                                                        <label class="layui-form-label"
                                                            style="width: 80px;">详细地址：</label>
                                                        <div class="layui-input-inline" style="width: 246px;">
                                                            <input type="text" name="xxdz" id="xxdz"
                                                                placeholder="请输入详细地址" autocomplete="off"
                                                                class="layui-input">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">日期时间：</label>
                                                        <div class="layui-input-inline" style="width: 178px;">
                                                            <input type="text" name="rqsj" id="rqsj"
                                                                placeholder="请选择开始时间" autocomplete="off"
                                                                class="layui-input">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">对战球队：</label>
                                                        <div class="layui-input-inline" style="width: 265px;">
                                                            <select name="dzqda" id="dzqda" lay-filter="dzqda"></select>
                                                        </div>
                                                        <label class="layui-form-label"
                                                            style="width: 40px;text-align: center;">VS</label>
                                                        <div class="layui-input-inline" style="width: 265px;">
                                                            <select name="dzqdb" id="dzqdb" lay-filter="dzqdb"></select>
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">接待酒店：</label>
                                                        <div class="layui-input-inline" style="width: 225px;">
                                                            <input type="text" name="jdjd" id="jdjd"
                                                                placeholder="请输入接待酒店" autocomplete="off"
                                                                class="layui-input">
                                                        </div>
                                                        <label class="layui-form-label"
                                                            style="width: 120px;text-align: center;">酒店联系方式：</label>
                                                        <div class="layui-input-inline" style="width: 225px;">
                                                            <input type="text" name="jdlxfs" id="jdlxfs"
                                                                placeholder="请输入联系方式" autocomplete="off"
                                                                class="layui-input">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">备选酒店：</label>
                                                        <div class="layui-input-inline" style="width: 225px;">
                                                            <input type="text" name="bxjd" id="bxjd"
                                                                placeholder="请输入备选酒店" autocomplete="off"
                                                                class="layui-input">
                                                        </div>
                                                        <label class="layui-form-label"
                                                            style="width: 120px;text-align: center;">酒店联系方式：</label>
                                                        <div class="layui-input-inline" style="width: 225px;">
                                                            <input type="text" name="bxlxfs" id="bxlxfs"
                                                                placeholder="请输入联系方式" autocomplete="off"
                                                                class="layui-input">
                                                        </div>
                                                    </div>
                                                    <div class="layui-form-item">
                                                        <label class="layui-form-label">近期接待赛事：</label>
                                                        <div class="layui-input-inline">
                                                            <input type="text" name="jdss" id="jdss"
                                                                placeholder="请输入接待赛事" autocomplete="off"
                                                                class="layui-input">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-md10 layui-col-md-offset1" style="text-align: left;">
                                            <button type="button"
                                                class="layui-btn layui-btn layui-btn-primary addchangci">增加场次</button>
                                        </div>
                                        <div class="layui-col-md10 layui-col-md-offset1" style="margin-top: 20px;">
                                            <div class="layui-col-md1" style="line-height: 35px;">赞助商：
                                                <span class="x-red">*</span>
                                            </div>
                                            <div class="layui-col-md11">
                                                <input name="zzs" id="zzs" type="text" class="layui-input"
                                                    style="width: 400px;float: left;">
                                                <div class="x-red" style="float: left;line-height: 35px;">（名称间用“，”隔开）
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="text-align: center;">
                                        <button type="button" class="layui-btn layui-btn-normal save" lay-submit
                                            lay-filter="submit">保存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
<script>
    var id

    function child(idval) {
        id = idval;
        console.log(id)
    }
    _init_area();
    var teams = [];
    layui.use(['table', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;

        var index = layer.load(1); //添加laoding,0-2两种方式
        layer.close(index)
        //获取协会列表
        $.ajax({
            url: getTeamList,
            type: "POST",
            // 设置的是请求参数
            data: {},
            // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            dataType: 'json',
            success: function (res) {
                for (var i = 0; i < res.teamList.length; i++) {
                    teams.push(
                        "<option value=\"" + res.teamList[i].id + "\">" + res
                        .teamList[i].name + "</option>"
                    )
                }
                for (var i = 0; i < teams.length; i++) {
                    $("#dzqda").append(teams[i])
                    $("#dzqdb").append(teams[i])
                }
                form.render('select'); //刷新select选择框渲染
            }
        })

        //执行一个laydate实例
        laydate.render({
            elem: '#rqsj', //指定元素
            type: "datetime"
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#qdbmsj2', //指定元素
            type: "datetime"
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#ssqzsj1', //指定元素
            type: "datetime"
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#ssqzsj2', //指定元素
            type: "datetime"
        });


        // 监听select改变，省市联动
        form.on('select(s_province)', function (data) {
            change(1);
            form.render('select');
        });
        $(".nextStep").on("click", function () {
            $(".topstep1").removeClass("active");
            $(".topstep2").addClass("active");
            $(".midstep1").css("display", "none")
            $(".midstep2").css("display", "block")
        })

        //获取数据，并做非空判断
        form.on('submit(submit)', function (data) {
            var roundNum, sponsors, roundInfo = [];
            roundNum = $("#changci").val();
            sponsors = $("#zzs").val();
            if (roundNum == "") {
                layer.alert("请输入场次", {
                    title: "提示"
                });
                return false
            } else if (sponsors == "") {
                layer.alert("请输入赞助商", {
                    title: "提示"
                });
                return false
            }

            for (var i = 0; i < $(".sstitle").length; i++) {
                if ($("[id^=s_province]").eq(i).val() == "省份") {
                    layer.alert("请选择省份", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=s_city]").eq(i).val() == "地级市") {
                    layer.alert("请选择地级市", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=xxdz]").eq(i).val() == "") {
                    layer.alert("请输入详细地址", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=rqsj]").eq(i).val() == "") {
                    layer.alert("请输入日期时间", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=dzqda]").eq(i).val() == "") {
                    layer.alert("请选择对战球队", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=dzqdb]").eq(i).val() == "" || $("[id^=dzqdb]").eq(i).val() == $(
                        "[id^=dzqda]").eq(i).val()) {
                    layer.alert("请选择对战球队", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=jdjd]").eq(i).val() == "") {
                    layer.alert("请输入接待酒店", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=jdlxfs]").eq(i).val() == "") {
                    layer.alert("请输入酒店联系方式", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=jdss]").eq(i).val() == "") {
                    layer.alert("请输入近期接待赛事", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=bxjd]").eq(i).val() == "") {
                    layer.alert("请输入备选酒店", {
                        title: "提示"
                    });
                    return false
                } else if ($("[id^=bxlxfs]").eq(i).val() == "") {
                    layer.alert("请输入酒店联系方式", {
                        title: "提示"
                    });
                    return false
                }
                roundInfo.push({
                    competitionId: "1",
                    roundId: "0",
                    province: $("[id^=s_province]").eq(i).val(),
                    city: $("[id^=s_city]").eq(i).val(),
                    address: $("[id^=xxdz]").eq(i).val(),
                    dateTime: $("[id^=rqsj]").eq(i).val(),
                    primaryTeamId: $("[id^=dzqda]").eq(i).val(),
                    assistantTeamId: $("[id^=dzqdb]").eq(i).val(),
                    ReceptionHotel: $("[id^=jdjd]").eq(i).val(),
                    ReceptionPhone: $("[id^=jdlxfs]").eq(i).val(),
                    recentEvents: $("[id^=jdss]").eq(i).val(),
                    alternativeHotel: $("[id^=bxjd]").eq(i).val(),
                    alternativePhone: $("[id^=bxlxfs]").eq(i).val()
                })
            }
            console.log(roundInfo)
            $.ajax({
                url: addOrUpdateRoundInfo,
                type: "POST",
                // 设置的是请求参数
                data: {
                    competitionId: "1",
                    roundNum: roundNum,
                    sponsors: sponsors,
                    roundInfo: JSON.stringify(roundInfo),
                },
                // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                dataType: 'json',
                success: function (res) {
                    if (res.code == "200") {
                        window.location.href = "choose_judge.html"
                    } else {
                        layer.alert(res.msg, {
                            title: "提示"
                        })
                    }
                }
            })




        });




        //添加赛程方法开始
        var a = 2;
        $(".addchangci").on("click", function () {
            var strVar = "";
            strVar += " <div class=\"layui-col-md11 layui-col-md-offset1\">";
            strVar += "<div class=\"sstitle\">场次：" + a;
            strVar += "<i style=\"float: right;\"";
            strVar += "class=\"layui-icon layui-icon-down rotate1\"><\/i>";
            strVar += "<\/div>";
            strVar += "<div class=\"ssbody\" style=\"padding-top: 20px;\">";
            strVar += "<div class=\"layui-form-item\">";
            strVar += "<label class=\"layui-form-label\">主办地：<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 120px;\">";
            strVar += "<select name=\"country" + a + "\" id=\"s_province" + a +
                "\" lay-verify=\"\"";
            strVar += "lay-filter=\"s_province" + a + "\"><\/select>";
            strVar += "<\/div>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 120px;\">";
            strVar += "<select name=\"city" + a + "\" id=\"s_city" + a + "\" lay-verify=\"\"";
            strVar += "lay-filter=\"s_city" + a + "\"><\/select>";
            strVar += "<\/div>";
            strVar += "<label class=\"layui-form-label\"";
            strVar += "style=\"width: 80px;\">详细地址：<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 246px;\">";
            strVar += "<input type=\"text\" name=\"xxdz" + a + "\"  id=\"xxdz" + a + "\"";
            strVar += "lay-verify=\"\" placeholder=\"请输入详细地址\"";
            strVar += "autocomplete=\"off\" class=\"layui-input\">";
            strVar += "<\/div>";
            strVar += "<\/div>";
            strVar += "<div class=\"layui-form-item\">";
            strVar += "<label class=\"layui-form-label\">日期时间：<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 178px;\">";
            strVar += "<input type=\"text\" name=\"rqsj" + a + "\" id=\"rqsj" + a + "\" ";
            strVar += "lay-verify=\"\" placeholder=\"请选择开始时间\"";
            strVar += "autocomplete=\"off\" class=\"layui-input\">";
            strVar += "<\/div>";
            strVar += "<\/div>";
            strVar += "<div class=\"layui-form-item\">";
            strVar += "<label class=\"layui-form-label\">对战球队：<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 265px;\">";
            strVar += "<select name=\"dzqda" + a + "\" id=\"dzqda" + a + "\" lay-verify=\"\"";
            strVar += "lay-filter=\"dzqda\"><\/select>";
            strVar += "<\/div>";
            strVar += "<label class=\"layui-form-label\"";
            strVar += "style=\"width: 40px;text-align: center;\">VS<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 265px;\">";
            strVar += "<select name=\"dzqdb" + a + "\" id=\"dzqdb" + a + "\" lay-verify=\"\"";
            strVar += "lay-filter=\"dzqdb" + a + "\"><\/select>";
            strVar += "<\/div>";
            strVar += "<\/div>";
            strVar += "<div class=\"layui-form-item\">";
            strVar += "<label class=\"layui-form-label\">接待酒店：<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 225px;\">";
            strVar += "<input type=\"text\" name=\"jdjd" + a + "\" id=\"jdjd" + a +
                "\" placeholder=\"请输入接待酒店\"";
            strVar += "autocomplete=\"off\" class=\"layui-input\">";
            strVar += "<\/div>";
            strVar += "<label class=\"layui-form-label\"";
            strVar += "style=\"width: 120px;text-align: center;\">酒店联系方式：<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 225px;\">";
            strVar += "<input type=\"text\" name=\"jdlxfs" + a + "\" id=\"jdlxfs" + a +
                "\" placeholder=\"请输入联系方式\"";
            strVar += "autocomplete=\"off\" class=\"layui-input\">";
            strVar += "<\/div>";
            strVar += "<\/div>";
            strVar += "<div class=\"layui-form-item\">";
            strVar += "<label class=\"layui-form-label\">备选酒店：<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 225px;\">";
            strVar += "<input type=\"text\" name=\"bxjd" + a + "\" id=\"bxjd" + a +
                "\" placeholder=\"请输入备选酒店\"";
            strVar += "autocomplete=\"off\" class=\"layui-input\">";
            strVar += "<\/div>";
            strVar += "<label class=\"layui-form-label\"";
            strVar += "style=\"width: 120px;text-align: center;\">酒店联系方式：<\/label>";
            strVar += "<div class=\"layui-input-inline\" style=\"width: 225px;\">";
            strVar += "<input type=\"text\" name=\"bxlxfs" + a + "\" id=\"bxlxfs" + a +
                "\" placeholder=\"请输入联系方式\"";
            strVar += "autocomplete=\"off\" class=\"layui-input\">";
            strVar += "<\/div>";
            strVar += "<\/div>";
            strVar += "<div class=\"layui-form-item\">";
            strVar += "<label class=\"layui-form-label\">近期接待赛事：<\/label>";
            strVar += "<div class=\"layui-input-inline\">";
            strVar += "<input type=\"text\" name=\"jdss" + a + "\" id=\"jdss" + a + "\" ";
            strVar += "lay-verify=\"\" placeholder=\"请输入接待赛事\"";
            strVar += "autocomplete=\"off\" class=\"layui-input\">";
            strVar += "<\/div>";
            strVar += "<\/div>";
            strVar += "<\/div>";
            strVar += "<\/div>";

            $(".scapbody").append(
                strVar
            );
            //执行一个laydate实例
            laydate.render({
                elem: '#rqsj' + a, //指定元素
                type: "datetime"
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#qdbmsj2' + a, //指定元素
                type: "datetime"
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#ssqzsj1' + a, //指定元素
                type: "datetime"
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#ssqzsj2' + a, //指定元素
                type: "datetime"
            });
            var abc = ["s_province" + a, "s_city" + a];
            form.on('select(s_province' + a + ')', function (data) {
                change(1);
                form.render('select');
            });

            function change(v) {
                var str = "0";
                for (i = 0; i < v; i++) {
                    str += ("_" + (document.getElementById(abc[i]).selectedIndex - 1));
                };
                var ss = document.getElementById(abc[v]);
                with(ss) {
                    length = 0;
                    options[0] = new Option(opt0[v], opt0[v]);
                    if (v && document.getElementById(abc[v - 1]).selectedIndex > 0 || !v) {
                        if (dsy.Exists(str)) {
                            ar = dsy.Items[str];
                            for (i = 0; i < ar.length; i++) {
                                options[length] = new Option(ar[i], ar[i]);
                            }
                            if (v) {
                                options[0].selected = true;
                            }
                        }
                    }
                    if (++v < abc.length) {
                        change(v);
                    }
                }
            }

            function _init_area() {
                for (i = 0; i < abc.length - 1; i++) {
                    document.getElementById(abc[i]).onchange = new Function("change(" + (i + 1) + ")");
                }
                change(0);
            }
            _init_area();
            for (var i = 0; i < teams.length; i++) {
                $("#dzqda" + a).append(teams[i])
                $("#dzqdb" + a).append(teams[i])
            }
            form.render();
            a++
        })
        //添加赛程方法结束
    })
    $("body").on("click", ".sstitle", function () {
        $(".ssbody").stop(true, false);
        if ($(this).children(".layui-icon.layui-icon-down").hasClass("rotate") && !$(this).children(
                ".layui-icon.layui-icon-down").hasClass("rotate1")) {
            $(this).children(".layui-icon.layui-icon-down").removeClass("rotate").addClass("rotate1");
            $(this).next().slideUp()
        } else if ($(this).children(".layui-icon.layui-icon-down").hasClass("rotate1") && !$(this).children(
                ".layui-icon.layui-icon-down").hasClass("rotate")) {
            $(this).children(".layui-icon.layui-icon-down").removeClass("rotate1").addClass("rotate");
            $(this).next().slideDown()
        }
    })
</script>

</html>